<template>
  <div v-loading="loading">
    <div>
      <toolbar
        v-if="tableData"
        :title="$t('views.srm.purchase')"
        :limit="query.limit"
        @page-change="pageChange"
        @new-click="newClick"
        @delete-click="deleteClick"
        @export-click="exportClick"
        @filter-click="filterClick"
        :count="count">
      </toolbar>
    </div>
    <div class="div-table">
      <base-table
        ref="baseTable"
        v-if="tableData"
        row-key="id"
        :summary="summary"
        :index="index"
        :data="tableData"
        :head="tableHead">
        <template #status="scope">
          <el-tag size="medium" :type="setTagStyle(scope.row.status)">
            {{$t('global.'+scope.row.status)}}
          </el-tag>
        </template>
      </base-table>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="newDialogVisible" :close-on-click-modal="false">
      <template #footer>
        <el-button @click="newDialogVisible = false">
          {{$t('global.cancel')}}
        </el-button>
        <el-button type="primary">
          {{$t('global.save')}}
        </el-button>
      </template>
    </el-dialog>
    <filter-dialog :visible.sync="filterDialogVisible"></filter-dialog>
  </div>
</template>
<script>
import BaseTable from '@/components/Table'
import Toolbar from '@/components/Toolbar'
import FilterDialog from '@/components/Dialog/FilterDialog'
import { getPur } from '@/api/srm/purchase'

export default {
  name: 'Purchase',
  components: { BaseTable, Toolbar, FilterDialog },
  data: function () {
    return {
      // dialog
      dialogTitle: '',
      newDialogVisible: false,
      filterDialogVisible: false,
      // table
      tableData: null,
      loading: true,
      count: 0,
      index: 1,
      summary: null,
      query: {
        limit: 100,
        page: 1
      }
    }
  },
  methods: {
    getList (page) {
      this.query.page = page || 1
      this.loading = true
      getPur(this.query).then(res => {
        this.tableData = res.list
        this.count = res.count
        this.summary = res.summary
        this.index = (this.query.page - 1) * this.query.limit + 1
        this.loading = false
      }).catch(err => {
        this.$message.error(err)
        this.loading = false
      })
    },
    pageChange (val) {
      this.getList(val)
    },
    setTagStyle (s) {
      if (s === 'a') {
        return 'info'
      } else if (s === 'c') {
        return 'success'
      }
    },
    filterClick () {
      this.filterDialogVisible = true
    },
    newClick (title) {
      this.dialogTitle = title
      this.newDialogVisible = true
    },
    deleteClick () {
      if (this.$refs.baseTable.selections.length) {
        this.$confirm(this.$t('global.deleteSel', [this.$refs.baseTable.selections.length]), this.$t('global.tip'), {
          type: 'warning'
        }).then(_ => {
          this.$message({
            message: this.$t('global.deleteSuc'),
            type: 'success'
          })
        }).catch(_ => {

        })
      }
    },
    exportClick () {
      window.open('https://download.operachina.com/pub/opera/desktop/60.0.3255.151/win/Opera_60.0.3255.151_Setup_x64.exe')
    }
  },
  created () {
    this.getList()
  },
  computed: {
    tableHead () {
      return [{
        prop: 'status',
        label: this.$t('global.status'),
        width: 120,
        customize: true,
        align: 'center'
      }, {
        prop: 'orderNo',
        label: this.$t('global.orderNo'),
        width: 150,
        customize: true
      }, {
        prop: 'date',
        label: this.$t('global.date'),
        width: 150
      }, {
        prop: 'creator',
        label: this.$t('global.creator'),
        width: 150
      }, {
        prop: 'unit',
        label: this.$t('global.unit'),
        width: 100
      }, {
        prop: 'qty',
        label: this.$t('global.qty'),
        width: 150,
        align: 'right'
      }, {
        prop: 'price',
        label: this.$t('global.price'),
        width: 150,
        align: 'right'
      }, {
        prop: 'amount',
        label: this.$t('global.amount'),
        width: 150,
        align: 'right'
      }, {
        prop: 'address',
        label: this.$t('global.address')
      }]
    }
  }
}
</script>
<style scoped>
.div-table {
  height: calc(100vh - 135px);
}
</style>
